<template>
    <div
      class="table-container"
      :class="isHeaderTop ? 'table-header-top' : 'table-header-left'"
    >
      <div
        class="t-header"
        :style="{
          gridTemplateColumns: isHeaderTop && getGridTemplateColumns(),
        }"
      >
        <div
          class="t-th"
          :class="{ 'gap-cell': item === true }"
          v-for="(item, index) in tableHeaders"
          :key="index"
        >
          {{ item === true ? '' : item }}
        </div>
      </div>
      <div class="t-body">
        <div
          class="t-row"
          :style="{
            gridTemplateColumns: isHeaderTop && getGridTemplateColumns(),
          }"
          v-for="(row, rowIndex) in tableDataNew"
          :key="rowIndex"
        >
          <template v-for="(cell, cellIndex) in row" :key="cellIndex">
            <div
              class="t-td"
              :class="{ 'gap-cell': cell === true }"
              v-if="!isArray(cell)"
            >
              {{ cell === true ? '' : cell }}
            </div>
            <div class="t-td" :class="{ 'gap-cell': cell === true }" v-else>
              <div
                class="t-td"
                :class="{ 'gap-cell': item === true }"
                v-for="(item, itemIndex) in cell"
                :key="itemIndex"
              >
                {{ item === true ? '' : item }}
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
    import { computed, reactive } from 'vue';
  
    const props = defineProps({
      // 表格列配置
      headers: {
        type: Array,
        default: () => [],
      },
      // 表格数据
      data: {
        type: Array,
        default: () => [],
      },
      splitNum: { type: Number, default: 2 },
      headerPosition: { type: String, default: 'top' }, // top | left
    });
  
    /** 表头是否是在顶部 */
    const isHeaderTop = computed(() => {
      return props.headerPosition === 'top' ? true : false;
    });
  
    const isArray = (data) => {
      return Array.isArray(data);
    };
  
    const repeatColumn = computed(() => {
      return props.headers.length * props.splitNum + (props.splitNum - 1);
    });
  
    const getGridTemplateColumns = () => {
      // 创建列模板数组
      const columns = [];
  
      for (let i = 0; i < props.splitNum; i++) {
        // 添加数据列（等宽）
        if (i > 0) {
          columns.push('20px'); // gap-cell 固定宽度
        }
        // 添加数据列（等宽）
        for (let j = 0; j < props.headers.length; j++) {
          columns.push('1fr');
        }
      }
  
      return columns.join(' ');
    };
  
    const tableHeaders = computed(() => {
      // return Array(props.splitNum).fill(props.headers).flat()
      return Array.from({ length: props.splitNum }, (_, i) =>
        i ? [true, ...props.headers] : props.headers
      ).flat();
    });
  
    // 精简的列分割方法 - 只适配二维数组
    const splitTableData = (data, columns = 1) => {
      if (columns <= 1) return data;
  
      const result = [];
      const rowsPerChunk = Math.ceil(data.length / columns);
  
      // 计算每行应该有多少列（包括分割列）
      const colsPerRow = data[0] ? data[0].length * columns + (columns - 1) : 0;
  
      for (let chunkIndex = 0; chunkIndex < rowsPerChunk; chunkIndex++) {
        const row = [];
  
        for (let colIndex = 0; colIndex < columns; colIndex++) {
          const dataIndex = chunkIndex * columns + colIndex;
  
          // 添加分割列（除了第一列）
          if (colIndex > 0) {
            row.push(true); // gap 列
          }
  
          // 添加数据列
          if (dataIndex < data.length) {
            // 直接使用原始数组数据
            row.push(...data[dataIndex]);
          } else {
            // 最后一行的长度不够，补充空数据
            const emptyCols = data[0] ? Array(data[0].length).fill('') : [];
            row.push(...emptyCols);
          }
        }
  
        // 确保每行长度一致
        while (row.length < colsPerRow) {
          row.push('');
        }
  
        result.push(row);
      }
  
      return result;
    };
  
    // 使用示例
    const tableDataNew = splitTableData(props.data, props.splitNum);
  </script>
  
  <style lang="scss" scoped>
    .table-container {
      width: 100%;
  
      .t-body {
        width: 100%;
      }
  
      .t-th,
      .t-td {
        width: 100%;
        flex: 1;
        min-height: 60px;
        // padding: 15px 10px;
        // box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
      }
  
      .t-td {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
      }
  
      .t-th {
        background: #e4eaf7;
      }
  
      // 表头在顶部
      &.table-header-top {
        border-radius: 6px;
        border-left: 2px solid #e8e8e8;
        border-right: 2px solid #e8e8e8;
  
        // 所有 .gap-cell 的前一个单元格
        .t-td:has(+ .gap-cell),
        .t-th:has(+ .gap-cell) {
          border-right: 2px solid #e8e8e8;
  
          // 如果是最后一行的前一个单元格
          .t-body .t-row:last-child & {
            border-bottom-right-radius: 6px;
            color: yellow;
          }
        }
  
        // 所有 .gap-cell 的后一个单元格
        .gap-cell + .t-td,
        .gap-cell + .t-th {
          border-left: 2px solid #e8e8e8;
  
          // 如果是最后一行的后一个单元格
          .t-body .t-row:last-child & {
            border-bottom-left-radius: 6px;
          }
        }
  
        .t-header {
          width: 100%;
          display: flex;
          font-weight: bold;
          display: grid;
  
          .t-th {
            &:has(+ .gap-cell) {
              border-top-right-radius: 6px;
            }
  
            &:not(.gap-cell) {
              border-top: 2px solid #e8e8e8;
            }
  
            &.gap-cell + .t-th {
              border-top-left-radius: 6px;
            }
          }
        }
  
        .t-body {
          .t-row {
            width: 100%;
            display: grid;
            // grid-template-columns: 1fr 1fr 1fr;
            box-sizing: border-box;
  
            &:last-child > .t-td:has(+ .gap-cell) {
              border-bottom-right-radius: 6px;
            }
  
            &:nth-child(2n) .t-td:not(:has(.gap-cell)) {
              background: #e8f2fd;
            }
  
            &:last-child > .t-td {
              border-bottom: 2px solid #e8e8e8;
  
              // 选中 .gap-cell 后一个单元格里面的最后一个元素
              &.gap-cell + .t-td > :last-child,
              &.gap-cell + .t-td:not(:has(.t-td)) {
                border-bottom-left-radius: 6px;
              }
            }
          }
        }
      }
  
      // 表头在左侧
      &.table-header-left {
        display: flex;
        border: none;
  
        .t-header {
          width: 15%;
          display: flex;
          flex-direction: column;
        }
  
        .t-body {
          display: flex;
  
          .t-row {
            flex: 1;
            display: flex;
            flex-direction: column;
  
            &:last-child > .t-td {
              border-bottom: none;
              flex-direction: row;
            }
  
            & > .t-td {
              background-color: #f8fbff;
  
              & > .t-td {
                flex: 1;
                min-height: auto;
              }
            }
          }
        }
      }
  
      // 分割列
      .gap-cell {
        background-color: transparent !important;
        border-bottom: none !important;
        min-height: 20px;
      }
    }
  </style>
  